//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent,Fragment } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Button,
	Modal,
  Table,
} from 'antd';

import styles from './ProReportSearchList.less';
import html2pdf from 'html2pdf.js';
import printJS from 'print-js';
import memberApprove from '@/assets/member_approve.png';
import memberApprove2 from '@/assets/member_approve2.png';
import memberApprove3 from '@/assets/member_approve3.png';
import memberApprove4 from '@/assets/member_approve4.png';
import memberApprove5 from '@/assets/member_approve5.png';
import memberApprove6 from '@/assets/member_approve6.png';
import memberApprove7 from '@/assets/member_approve7.png';

//查看上报人员
class ReportPerson extends PureComponent {


	constructor(props) {
		super(props);
    this.state = {
        modalVisibleByMemberApprove: false
    };
	}


  columnsByReport = [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        }, 	{
          title: '性别',
          dataIndex: 'sex',
          key: 'sex',
        },  {
          title: '职务层次',
          dataIndex: 'duty_level',
          key: 'duty_level',
        },  {
          title: '任职时间',
          dataIndex: 'appointment_time',
          key: 'appointment_time',
        }, {
          title: '现授警衔',
          dataIndex: 'incumbent_police_rank',
          key: 'incumbent_police_rank',
        }, {
          title: '新授警衔',
          dataIndex: 'police_rank',
          key: 'police_rank',
        }, {
          title: '审核状态',
          dataIndex: 'status',
          key: 'status',
        }, {
          title: '审核单位',
          dataIndex: 'unit',
          key: 'unit',
        }, {
          title: '审核日期',
          dataIndex: 'check_time',
          key: 'check_time',
        }, {
          title: '操作',
          fixed:'right',
          align: 'center',
          width: 100,
          render: (text, record) => {
	        	return (
		        	<Fragment>
                  <a onClick={() => this.handleModalByMemberApprove(true)}>查看审批表</a>
              </Fragment>
	        	);
          }
        }
  ];

  handleModalByMemberApprove = flag => {
  	this.setState({
  		modalVisibleByMemberApprove: !!flag,
  	});
  };

  exportPdf = () => {
  	// 要导出的dom节点，注意如果使用class控制样式，一定css规则
      const element = document.getElementById('doc');
      // 导出配置
      const opt = {
        margin: 1,
        filename: '警衔审批表_陈某_20200508134024',
        image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
        html2canvas: { scale: 2, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
      };
      if (element) {
        html2pdf().set(opt).from(element).save(); // 导出
      }
  };

  //打印
  print = () => {
    printJS({
      printable: 'print',
      type: 'html'
    });
  }

	render() {
		const {
			modalVisibleByReport,
			handleModalVisibleByReport,
		} = this.props;

    const {
    	modalVisibleByMemberApprove
    } = this.state;

    const dataByReport = [
      {
        unit:"内蒙古自治区公安厅",
        status: "已通过",
        name:"陈某",
        sex:"男",
        working_hours:"2002-07-24",
        post:"主任科员",
        duty_level:"二级警长",
        appointment_time:"1998-04-24",
        change_type:"首授",
        incumbent_police_rank:"未授衔",
        check_time:"2008-08-24",
        police_rank:"一级警督",
        new_start_time:"2008-09-24",
      },
    ];

		return(
    <div>
        <Modal
        width={900}
        centered
        destroyOnClose
        title="审批表"
        visible={modalVisibleByMemberApprove}
        onCancel={()=> this.handleModalByMemberApprove()}
        footer={<Button key="back" onClick = {() => this.handleModalByMemberApprove(false) }>取消</Button>}
        >
        <div style={{width: '100%',height: '520px',overflow: 'auto',textAlign: 'center',position: 'relative'}}>,
          <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.print}>
          打印
          </Button>
          <Button id="doc" type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.exportPdf}>
          导出
          </Button>
          <span id="print">
              <img alt="" src={memberApprove} style={{width: '100%',marginTop: '10px'}}/>
              <img alt="" src={memberApprove2} style={{width: '100%'}}/>
              <img alt="" src={memberApprove3} style={{width: '100%'}}/>
              <img alt="" src={memberApprove4} style={{width: '100%'}}/>
              <img alt="" src={memberApprove5} style={{width: '100%'}}/>
              <img alt="" src={memberApprove6} style={{width: '100%'}}/>
              <img alt="" src={memberApprove7} style={{width: '100%'}}/>
          </span>

        </div>
        </Modal>
        <Modal
          width={800}
          centered
          bodyStyle={{ padding: '20px 40px 20px' }}
          destroyOnClose
          title="上报人员列表"
          visible={modalVisibleByReport}
          onCancel={() => handleModalVisibleByReport(false)}
          footer={<Button key="back" onClick = {() => handleModalVisibleByReport(false) }>取消</Button>}
        >
        <div className={styles.proUsertableList}>
          <Table columns={this.columnsByReport} dataSource={dataByReport}/>
          </div>
        </Modal>
    </div>

		);
	}

}

export default ReportPerson;
